<template>
	<div class="bgimg" :style="{ height: bodyHeight + 'px' }">
		<div class="reg">
			<van-nav-bar left-arrow @click-left="onClickLeft" @click-right="onClickRight">
				<span slot="right">
       				{{$t('Login.v2')}}
      			</span>
			</van-nav-bar>
		</div>
		<div class="login">
			<div class="title">
				<van-image width="100" height="100" :src="picture" round/>
			</div>
			<div class="main">
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="userName" clearable :placeholder="$t('Login.v3')" :label="$t('Login.v4')" left-icon="contact" maxlength="20" />
					</van-cell-group>
				</div>
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="userPassword" clearable :placeholder="$t('Login.v5')" :label="$t('Login.v6')" left-icon="smile-o" maxlength="20" type="password" />
					</van-cell-group>
				</div>
				<div class="btn">
					<van-button type="primary" @click.native="Login" :loading="loading">{{$t('Login.v1')}}</van-button>
				</div>
				<div class="forget" @click="Forget">
					{{$t('Login.v7')}}?
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { base } from './../utils/api';
	let _this;
	export default {
		name: 'Login',
		components: {},
		props: {},
		data() {
			return {
				bodyHeight: '',
				userName: '',
				userPassword: '',
				k: '', // 凭证K值
                v: '', // 凭证V值
				loading: false,
				picture: require('./../assets/images/my.png')
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {
			userName: function() {
				this.userName = this.userName.replace(/[\u4e00-\u9fa5]/ig, ''); // 帐号不能输入中文
			},
			userPassword: function() {
				this.userPassword = this.userPassword.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文
			}
		},
		computed: {},
		methods: {
			Login() {
				if(!this.userName) {
					this.$toast(this.$t('Login.v8'));
					return false;
				} else {
					if(this.userName.length < 4 || this.userName.length > 20) {
						this.$toast(this.$t('Login.v9'));
						return false;
					}
				}
				if(!this.userPassword) {
					this.$toast(this.$t('Login.v10'));
					return false;
				} else {
					if(this.userPassword.length < 6 || this.userPassword.length > 20) {
						this.$toast(this.$t('Login.v11'));
						return false;
					}
				}
				this.loading = true;
                _this.axios.defaults.headers['Authorization'] = 'mNrNeheLd2NTCxBkgxMASrkNyB4Mb9wRk2qQX2Q5H6h6Q/++ayEFo2o+2IDPV1m0nWbPPFbt3b/rZwAUvMydsmQW+xQ+dLJTzOjlz9tQNKKSC+2iV+1UUiUW74QP3BQBPbyfH/1qdKuwOeXplyjLv3nmWiDys9CCMxPjhDU/qyA=';
                base.getCredentials().then(res => {
                    if (res.code == 8008) {
                        _this.k = res.data.k;
                        _this.v = res.data.v;
                        base.getSignUp({
                            'username': _this.userName,
                            'password': _this.rsaEncrypt(_this.userPassword + ',' + _this.k + ',' + _this.v)
                        }).then(res => {
                            if (res.code == 8008) {
                            	sessionStorage.token = res.data.access_token;
                                localStorage.setItem("userName", _this.userName);
                                _this.axios.defaults.headers['Authorization'] = 'bearer ' + sessionStorage.token;
                                _this.$router.push({
                                    path: '/'
                                })
                            }
                            _this.loading = false;
                            _this.$toast(res.msg);
                        })
                    }
                })
			},
			onClickLeft() {
				this.$router.push({
					path: '/'
				});
			},
			onClickRight() {
				this.$router.push({
					path: '/Register'
				});
			},
			Forget() {
				this.$router.push({
					path: '/FindPwd'
				});
			}
		},
		created() {},
		mounted() {
			this.bodyHeight = document.documentElement.clientHeight;
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.reg /deep/ .van-nav-bar {
		background-color: transparent;
	}
	
	.reg /deep/ .van-nav-bar__left,
	.van-nav-bar__right {
		color: white;
	}
	
	.reg /deep/ .van-nav-bar .van-icon {
		color: white;
	}
	
	.reg /deep/ .van-hairline--bottom::after {
		border: 0;
	}
	
	.bgimg {
		height: 100%;
		background: url('../assets/images/bg.jpg') no-repeat left top;
		background-size: cover;
	}
	
	.title {
		text-align: center;
		font-size: 26px;
		color: white;
		margin: 0 auto;
		margin-top: 50px;
	}
	
	.main {
		position: relative;
		padding: 30px 20px;
	}
	
	.text {
		padding-bottom: 10px;
	}
	
	.btn .van-button--normal {
		width: 100%;
	}
	
	.text /deep/ .van-cell {
		background-color: transparent;
	}
	
	.text /deep/ .van-cell-group {
		background-color: transparent;
	}
	
	.text /deep/ .van-field__left-icon .van-icon,
	.van-field__right-icon .van-icon {
		color: white;
	}
	
	.text /deep/ .van-field__label {
		color: white;
	}
	
	.text /deep/ .van-field__control {
		color: white;
	}
	
	.text /deep/ .van-field__label {
		width: 65px;
	}
	
	.text /deep/ .van-hairline--top-bottom::after,
	.van-hairline-unset--top-bottom::after {
		border: 0;
	}
	
	.forget {
		font-size: 13px;
		float: right;
		color: white;
		padding-top: 20px;
	}
</style>